import React, { Fragment, Component } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import { FormComponentProps } from '@ant-design/compatible/es/form';
import PageHeader from '@/components/PageHeader';

import {
  Card,
  Select,
  Descriptions,
  Checkbox,
  Timeline,
} from 'antd';

import SettingDetail from './components/SettingDetail';

const { Option } = Select;
const { Item } = Descriptions;

const statusText = ['无', '有'];
const openText = ['禁用', '启用'];
const openCodeType = ['无', '6位字母和数字', '8位纯数字'];

const pushTypes = {
  xinge: '信鸽',
  erlang: 'erlang',
  iot: '电信iot平台',
};

interface CabinetManageDetaiProps extends FormComponentProps {
  dispatch: Dispatch;
  detailInfo: any;
  INITINFO: any;
  location: { query: any };
}

@connect(({
  cabinetManagementDetail: { detailInfo },
  common: { INITINFO },
}: any) => ({
  detailInfo,
  INITINFO,
}))
class CabinetManageDetaiElem extends Component<CabinetManageDetaiProps> {
  componentDidMount() {
    const { location: { query } } = this.props;
    this.fetchDetailInfo(query.id);
    this.fetchAction('common/fetchTariffList');
  }

  componentDidUpdate(prevProps: any) {
    const {
      location: { query: { id } },
    } = this.props;
    if (prevProps.location.query.id !== id) {
      this.fetchDetailInfo(id);
    }
  }

  fetchDetailInfo = (id: number) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cabinetManagementDetail/fetch',
      payload: { id },
    });
  };

  fetchAction = (typeName: string, payload: any = {}) => {
    const { dispatch } = this.props;
    const type = typeName.indexOf('common') >= 0
      ? typeName : `cabinetManagementDetail/${typeName}`;
    dispatch({ type, payload });
  };

  render() {
    const {
      detailInfo,
      INITINFO: { tariffList },
    } = this.props;

    const is_Low_version = detailInfo.hwareVersion === '1.0'
      || detailInfo.hwareVersion === '2.0'
      || detailInfo.hwareVersion === '2.7'
      || detailInfo.hwareVersion === '3.0'
      || detailInfo.hwareVersion === '4.0'
      || detailInfo.hwareVersion === '4.1'
      ? 0
      : 1;

    return (
      <Fragment>
        <PageHeader />

        <Card title="基本信息" bordered={false}>
          <Descriptions className="marginB12" bordered size="small">
            <Item label="柜体编号">{detailInfo.code}</Item>
            <Item label="柜体名称">{detailInfo.name}</Item>
            <Item label="硬件版本">{detailInfo.hwareVersion}</Item>
            <Item label="蓝牙名称">{detailInfo.bluetoothName}</Item>
            <Item label="柜体键盘">{statusText[detailInfo.hasKeyboard]}</Item>
            <Item label="扫码确认柜体编号">{openText[detailInfo.scanConfirm]}</Item>
            <Item label="结构版本">{detailInfo.structVersion}</Item>
            <Item label="电路版本">{detailInfo.circuitVersion}</Item>
            <Item label="短信地址">{detailInfo.addr}</Item>
            <Item label="柜体屏幕">{statusText[detailInfo.hasScreen]}</Item>
            <Item label="经度">{detailInfo.longitude}</Item>
            <Item label="纬度">{detailInfo.latitude}</Item>
            <Item label="套餐">
              <Select value={detailInfo.tariffpkgId} disabled>
                <Option value={0}>无</Option>
                {tariffList.map((item: any) => (
                  <Option value={item.id} key={item.id}>
                    {item.name}
                  </Option>
                ))}
              </Select>
            </Item>
            <Item label="PUSH类型">{pushTypes[detailInfo.pushPlatform]}</Item>
            <Item label="小区(学校)">{detailInfo.gardenName}</Item>
            <Item label="物流中心">{detailInfo.logisName || '--'}</Item>
            <Item label="柜体状态">{detailInfo.statusName}</Item>
            <Item label="取件密码类型">{openCodeType[detailInfo.openCodeType]}</Item>
            <Item label="可用付费方">
              <Checkbox.Group
                disabled
                value={detailInfo.payMaskStr ? detailInfo.payMaskStr.split(',') : []}
              >
                <Checkbox value="1">投递人付费</Checkbox>
                <Checkbox value="2">用户付费</Checkbox>
              </Checkbox.Group>
            </Item>
            <Item label="蓝牙地址">{detailInfo.bluetoothMac || '--'}</Item>
            <Item label="扫码器序列号">{detailInfo.scannerSid || '--'}</Item>
            <Item label="滞留件时间阈值(天)">{detailInfo.detentionDay}</Item>
            <Item label="滞留件个数阈值">{detailInfo.detentionMax}</Item>
            <Item label="UI APK版本">{detailInfo.softVersion || '--'}</Item>
            <Item label="Booter APK版本">{detailInfo.booterVersion || '--'}</Item>
            <Item label="固件版本">{detailInfo.firmVersion || '--'}</Item>
            <Item label="系统版本">{detailInfo.sysVersion || '--'}</Item>
            <Item label="网络类型">{detailInfo.netType || '--'}</Item>
            <Item label="分辨率">{detailInfo.resolution || '--'}</Item>
            <Item label="格口使用编码">{detailInfo.currentSelectedCodeName}</Item>
            <Item label="IMEI编号">{detailInfo.iotImei || '--'}</Item>
            <Item label="运维人员">{detailInfo.managerName || '--'}</Item>
            <Item label="联系电话">{detailInfo.managerPhone || '--'}</Item>
            <Item label="格口预约状态">{openText[detailInfo.isOpenAppointment]}</Item>
            <Item label="预约保留时间">{detailInfo.retentionLength}小时</Item>
            <Item label="温湿度采集">{detailInfo.isCollection === 0 ? '无' : '有'}</Item>
            <Item label="引流配置">{detailInfo.leadswitch === 0 ? '关闭' : '开启'}</Item>
          </Descriptions>
        </Card>

        <Card title="柜体信息" bordered={false}>
          <Descriptions className="marginB12">
            {is_Low_version === 1 && (
              <Item label="副柜总数">{detailInfo.cellInfo && detailInfo.cellInfo.length}</Item>
            )}
            {is_Low_version === 0 && (
              <Item label="副柜布局">{detailInfo.layout}</Item>
            )}
          </Descriptions>

          <Descriptions>
            {detailInfo.cellInfo
              && detailInfo.cellInfo.map((item: any) => (
                <Item label={`副柜${item.slaveCode}`} key={item.slaveCode}>
                  {/* eslint-disable-next-line no-irregular-whitespace */}
                  {`${item.slaveTypeName}　　　共${item.cellCount}格口`}
                </Item>
              ))}
          </Descriptions>
        </Card>

        <Card title="日志信息" bordered={false}>
          <Timeline>
            <Timeline.Item>最近操作人：{detailInfo.updateUserName}</Timeline.Item>
            <Timeline.Item>最近操作时间：{detailInfo.updateTime}</Timeline.Item>
            <Timeline.Item>创建人：{detailInfo.createUserName}</Timeline.Item>
            <Timeline.Item>创建时间：{detailInfo.createTime}</Timeline.Item>
          </Timeline>
        </Card>
        <SettingDetail />
      </Fragment>
    );
  }
}

export default CabinetManageDetaiElem;
